﻿@{
    ViewBag.Title = "ReservationsManagement";
}

@Styles.Render("~/Content/themes/start/css")

<div class="section_main">

    <div id="reservations-grid" class="row">
        <section class="eight columns">
            <h2>Reservations Management</h2>
            <div id="results-table"></div>
        </section>

        <section class="four columns">
            <h2>Menu</h2>
            <div class="panel">
                <h3>Reservations</h3>                            
                @Html.ActionLink("Show All", "ReservationsManagement", 
                    new { id = @ViewBag.HotelId, statusId = 0 },
                    new { @class = "button small radius", @style="width:120px"  })
                |
                @Html.ActionLink("Pending", "ReservationsManagement", 
                    new { id = @ViewBag.HotelId, statusId = 1 },
                    new { @class = "button small radius", @style="width:120px"  })
                <br />
                <br />
                @Html.ActionLink("Accepted", "ReservationsManagement", 
                    new { id = @ViewBag.HotelId, statusId = 2 },
                    new { @class = "button small radius", @style="width:120px"  })
                |
                @Html.ActionLink("Declined", "ReservationsManagement",
                    new { id = @ViewBag.HotelId, statusId = 3 },
                    new { @class = "button small radius", @style="width:120px" })
            </div>
        </section>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")

    <script src="~/Scripts/CustumScripts/ClientSorting.js"></script>
    <script id="results-table-template" type="text/html">
        {{#each reservation}}
        <div>
            <article class="blog_post">
                <div class="five columns">
                    <p>
                        <strong>{{RoomName}}</strong> ({{RoomId}})<br />
                        Reservation# {{ReservationId}} ({{DateCreatedStr}})<br />
                        From <span class="start-date-sorter">{{StartDateSrt}}</span> to {{EndDateSrt}}<br />
                    </p>
                </div>
                <div class="four columns">
                    <p>
                        Client: <strong>{{UserName}}</strong> <br />
                        Status: <span class="reservation-status {{StatusName}}">{{StatusName}}</span><br />
                    </p>
                </div>
                <div class="three columns">
                    <form>
                        <a class="button small radius" style='width:120px' 
                            onclick="reservationsServer.updateReservationStatusId({{ReservationId}}, 2)">
                            Accept
                        </a><br />
                        <a class="button small radius" style='width:120px' 
                            onclick="reservationsServer.updateReservationStatusId({{ReservationId}}, 3)">
                            Decline
                        </a>
                    </form>
                    
                </div>
            </article>
        </div>
        {{/each}}
    </script>

    <script>
        var reservationsServer = (function () {
            var reservationsApiUrl = "/api/reservationsapi/",
                updateReservationStatusUrl = "/actionsapi/reservationsapi/updatereservationstatusid",

                updateReservations = function () {
                    return $.ajax({
                        url: reservationsApiUrl + @ViewBag.HotelId,
                        data: { statusId : @ViewBag.StatusId },
                        dataType: "json",
                        traditional: true,
                        success: function (data) {
                            var result = templates.videoTable({ reservation: data });
                            $("#results-table").html(result);

                            setTimeout(function () {
                                reservationsServer.updateReservations()
                            }, 5000);
                        },
                        error: function(err)
                        {
                            if (err.status === 403) {
                                alert("Go away cheater!");
                                window.location.href = "/Hotel/MyHotels"
                            }
                        }
                    });
                },

                updateReservationStatusId = function(reservationId, statusId) {
                    return $.ajax({
                        type: "POST",
                        url: updateReservationStatusUrl, 
                        data: { ReservationId : reservationId, StatusId : statusId },
                        dataType: "json",
                        traditional: true,
                        success: function()
                        {
                            reservationsServer.updateReservations();
                        },
                        error: function()
                        {
                            reservationsServer.updateReservations();
                        }
                    });
                },

                templates = {},
                compileTemplates = function () {
                    return templates.videoTable = Handlebars.compile($("#results-table-template").html());
                };

            return {
                compileTemplates: compileTemplates,
                updateReservationStatusId: updateReservationStatusId,
                updateReservations: updateReservations
            };
        }());
  
        (function () {
            $(function () {
                reservationsServer.compileTemplates();
                reservationsServer.updateReservations();
            });
        }());
    </script>
}